import React, { useState } from "react";
import styles from "./index.module.scss";

import img1 from "@/assets/img/demo.jpg";
import img2 from "@/assets/img/1.jpg";
import img3 from "@/assets/img/2.jpg";
import img4 from "@/assets/img/3.jpg";

import { ReactSortable } from "react-sortablejs";

type Props = {
  id: number;
  img: string;
};

function H5Move() {
  const [list, setList] = useState<Props[]>([
    { id: 1, img: img1 },
    { id: 2, img: img2 },
    { id: 3, img: img3 },
    { id: 4, img: img4 },
  ]);

  return (
    <div className={styles.H5Move}>
      <ReactSortable className="box" list={list} setList={setList}>
        {list.map((v) => (
          <div className="row" key={v.id}>
            <img src={v.img} alt="" />
          </div>
        ))}
      </ReactSortable>
    </div>
  );
}

const MemoH5Move = React.memo(H5Move);

export default MemoH5Move;
